<template>
  <div id="app">
    <!-- 头部区域 -->
    <view-box>
      <x-header class="header" slot="header" :left-options="{backText: ''}" title="网易新闻">
        <div slot="right">搜索</div>
      </x-header>

      <sc :lock-y="true">
        <div class="tab">
          <tab>
            <tab-item selected>推荐</tab-item>
            <tab-item>要闻</tab-item>
            <tab-item>游戏</tab-item>
            <tab-item>娱乐</tab-item>
            <tab-item>科技</tab-item>
            <tab-item>体育</tab-item>
            <tab-item>互联网</tab-item>
          </tab>
        </div>
      </sc>
      <scroller class="my_scroller" :on-refresh="refresh" :on-infinite="infinite" ref="myRef">
        <swiper :list="swiperlist" :loop="true" v-model="swiperIndex"></swiper>

        <marquee class="my_marquee">
          <marquee-item v-for="list in marqueeList">{{list.title}}</marquee-item>
        </marquee>

        <panel header="" :list="dataList" :type="type"></panel>
        <panel header="" :list="moreDateList" :type="type"></panel>

      </scroller>

      <!-- 底部按钮 -->
      <tabbar slot="bottom">
        <tabbar-item>
          <img slot="icon" src="./assets/icon_nav_button.png" alt="">
          <span slot="label">首页</span>
        </tabbar-item>
        <tabbar-item>
          <img slot="icon" src="./assets/icon_nav_cell.png" alt="">
          <span slot="label">推荐</span>
        </tabbar-item>
        <tabbar-item>
          <img slot="icon" src="./assets/icon_nav_article.png" alt="">
          <span slot="label">我的</span>
        </tabbar-item>
      </tabbar>
    </view-box>
    <router-view></router-view>
  </div>
</template>

<script>
var refreshKey = ['A', 'B01', 'B02', 'B03', 'B04', 'B05', 'B06'
  , 'B07', 'B08', 'B09', 'B010']
var key = 0;
var start = 0;
var end = start + 9;
var keyValue = 'A';
var iniLoaded = false;
function getRefreshKey() {
  key++
  if (key == refreshKey.length) {
    key = 0
  }
  keyValue = refreshKey[key];
  console.log(keyValue)
}
import {
  ViewBox,
  XHeader,
  Tabbar,
  TabbarItem,
  Tab,
  TabItem,
  Scroller as sc,
  Swiper,
  Marquee,
  MarqueeItem,
  Panel
} from 'vux'
export default {
  name: 'app',
  components: {
    ViewBox,
    XHeader,
    Tabbar,
    TabbarItem,
    Tab,
    TabItem,
    sc,
    Swiper,
    Marquee,
    MarqueeItem,
    Panel
  },
  created() {
    this.$jsonp('http://3g.163.com/touch/jsonp/sy/recommend/0-9.html').then(data => {
      console.log(data)
      this.swiperlist = data.focus.filter(item => {
        return item.addata === null
      }).map(item => {
        return {
          url: item.link,
          img: item.picInfo[0].url,
          title: item.title
        }
      })
    })

    //shouping news 
    this.$jsonp('http://3g.163.com/touch/jsonp/sy/recommend/0-9.html').then(data => {
      console.log(data)
      this.dataList = data.list.filter(item => {
        return item.addata === null
      }).map(item => {
        return {
          src: item.picInfo[0].url,
          title: item.title,
          desc: item.digest,
          url: item.link
        }
      })
      iniLoaded = true;
    })

    //guandong shuju
    this.$jsonp('http://3g.163.com/touch/jsonp/sy/recommend/0-9.html').then(data => {
      console.log(data)
      this.marqueeList = data.live.filter(item => {
        return item.addata === null
      }).map(item => {
        return {
          title: item.title
        }
      })
    })
  },
  methods: {
    refresh() {
      getRefreshKey();
      //下拉刷新 http://3g.163.com/touch/jsonp/sy/recommend/'+start+'-'+end+'html'
      this.$jsonp('http://3g.163.com/touch/jsonp/sy/recommend/0-9.html', {
        miss: '00',
        refresh: keyValue
      }).then(data => {
        this.dataList = data.list.filter(item => {
          return item.addata === null
        }).map(item => {
          return {
            src: item.picInfo[0].url,
            title: item.title,
            desc: item.digest,
            url: item.link
          }
        })
        this.$refs.myRef.finishPullToRefresh()
      })
    },
    infinite() {
      this.$jsonp(`http://3g.163.com/touch/jsonp/sy/recommend/${start}-${end}.html`, {
        miss: '00',
        refresh: keyValue
      }).then(data => {
        if (!iniLoaded) {
          this.$refs.myRef.finishInfinite()
          return
        }
        var dataList = data.list.filter(item => {
          return item.addata === null && item.picInfo[0]
        }).map(item => {
          return {
            src: item.picInfo[0].url,
            title: item.title,
            desc: item.digest,
            url: item.link
          }
        })
        this.moreDateList = this.moreDateList.concat(dataList)
        start += 10;
        end = start + 9
        this.$refs.myRef.finishInfinite()
      })
    }
  },
  data() {
    //// http://3g.163.com/touch/jsonp/sy/recommend/0-8.html
    return {
      swiperlist: [],
      swiperIndex: 1,
      dataList: [],
      marqueeList: [],
      moreDateList: []

    }
  }
}
</script>

<style lang="less" >
@import '~vux/src/styles/reset.less';


html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

#app {
  height: 100%;
  .header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
  }
  .tab {
    margin-top: 46px;
    width: 1200px;
  }
  .my_marquee {
    margin: 10px;
  }
  .weui-media-box__hd,
  .weui-media-box__hd img {
    width: 102px;
    height: 78px;
  }
  .weui-media-box__bd {
    height: 78px;
  }
  .my_scroller {
    top: 90px
  }
  .loading-layer {
    padding-bottom: 90px;
  }
}
</style>
